import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { useUrlQueryParam } from 'utils/hooks/use-url-query-param';

export const SearchPanel = ({ users, param, setParam }: any) => {
  const [params, setParams] = useUrlQueryParam(['name', 'personId']);

  useEffect(() => {
    setParams({
      name: 'xxx',
      // personId: '1111'
    })
  }, []);

  return (
    <SearchPanelFrom>
      <div>
        <input type="text" onChange={(evt) => {
          setParams(param);
          setParam({
            ...param,
            name: evt.target.value
          })
        }} />
        <select value={param?.personId} onChange={(evt) => {
          setParams(param);
          setParam({
            ...param,
            personId: evt.target.value
          })
        }} >
          <option value={''}>负责人</option>
          {users?.map((user: any) => (<option key={user?.id} value={user.id}>{user.name}</option>))}
        </select>
      </div>
    </SearchPanelFrom >
  )
}

const SearchPanelFrom = styled.form`
  margin-bottom: 10px;
`;